<template>
  <section>
    <canvas ref="cav" class="border"></canvas>
  </section>
</template>

<script>
import {getRandomColor} from "@/utils/tools";

/**
 *@Description:线性渐变和径向渐变
 *@author ZY
 *@date 2022/11/20 21:38
 */
export default {
  name: "canvas-gradual",
  data() {
    return {}
  },
  mounted() {
    this.main()
  },
  methods: {
    main() {
      let that = this
      let cavCanvas = this.$refs.cav
      cavCanvas.width = window.innerWidth - 300
      cavCanvas.height = 100
      let cavCtx = cavCanvas.getContext('2d')
      this.draw(cavCtx, 20, 40, 250, 40, 6, getRandomColor())
    },
    /**
     *@Description:
     *@author ZY
     *@date 2022/11/19 21:45
     *@param {Object} ctx canvas上下文
     *@param {Number} x 起点X坐标
     *@param {Number} y 起点Y坐标
     *@param {Number} x1 终点X坐标
     *@param {Number} y1 终点Y坐标
     *@param {Number} width 线条宽度
     *@param {String} color 线条颜色
     */
    draw(ctx, x, y, x1, y1, width, color) {

      //  x0开始的 x 轴坐标。y0开始的 y 轴坐标。x1结束的 x 轴坐标。y1结束的 y 轴坐标。。
      //TODO:线性渐变
      let gradient = ctx.createLinearGradient(150, 0, 590, 0);
      gradient.addColorStop(0, getRandomColor());
      gradient.addColorStop(0.5, getRandomColor());
      gradient.addColorStop(0.8, getRandomColor());
      gradient.addColorStop(1, "white");
      ctx.fillStyle = gradient;
      ctx.fillRect(150, 10, 590, 80);


      //  x0开始圆形的 x 轴坐标。y0开始圆形的 y 轴坐标。r0开始圆形的半径。x1结束圆形的 x 轴坐标。y1结束圆形的 y 轴坐标。r1结束圆形的半径。
      //TODO:径向渐变
      let gradientRadial = ctx.createRadialGradient(50, 50, 50, 50, 50, 0);
      gradientRadial.addColorStop(0, "white");
      gradientRadial.addColorStop(1, getRandomColor());
      ctx.fillStyle = gradientRadial;
      ctx.fillRect(0, 0, 100, 100);
    },
  }
}
</script>

<style lang="scss" scoped>
.border {
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  overflow: hidden;
}
</style>
